<template>
  <div class="config-container">
    <el-form label-width="100px">
      <el-form-item label="显示标题：">
        <el-radio v-model="titleOptions.display" :label="true" @change="dataChange">属性</el-radio>
        <el-radio v-model="titleOptions.display" :label="false" @change="dataChange">静态值</el-radio>
        <span>位置：</span>
        <el-select v-model="titleOptions.position" placeholder="请选择" class="w-100">
          <el-option label="上" value="top"></el-option>
          <el-option label="下" value="bottom"></el-option>
          <el-option label="左" value="left"></el-option>
          <el-option label="右" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="titleOptions.display" label="标题内容：">
        <el-input v-model="titleOptions.text" type="text" placeholder="请输入标题内容" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="显示图例：">
        <el-radio v-model="legendOptions.display" :label="true" @change="dataChange">属性</el-radio>
        <el-radio v-model="legendOptions.display" :label="false" @change="dataChange">静态值</el-radio>
        <span>位置：</span>
        <el-select v-model="legendOptions.position" placeholder="请选择" class="w-100">
          <el-option label="上" value="top"></el-option>
          <el-option label="下" value="bottom"></el-option>
          <el-option label="左" value="left"></el-option>
          <el-option label="右" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示标签：">
        <el-radio v-model="labelOptions.display" :label="true" @change="dataChange">属性</el-radio>
        <el-radio v-model="labelOptions.display" :label="false" @change="dataChange">静态值</el-radio>
      </el-form-item>
      <el-form-item label="动画延时：">
        <el-input v-model="animationOptions.duration" type="number" placeholder="输入动画延时" class="w-100" @change="dataChange"></el-input>
        <span class="margin-left-10">效果：</span>
        <el-select v-model="animationOptions.easing" placeholder="请选择" class="w-120">
          <el-option v-for="item in easingList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const easingList =
  "linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce";
export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 图形数据对象
    chart: {
      type: Object,
      default: () => {
        return {
          dataset: {},
          options: [
            {
              display: true,
              position: "top",
              fontSize: 14,
              fontColor: "#666",
              fontStyle: "bold",
              padding: 10,
              text: "",
              type: "title"
            },
            {
              display: true,
              position: "bottom",
              labels: null,
              type: "legend"
            },
            {
              duration: 2000,
              easing: "easeInExpo",
              type: "animation"
            }
          ],
          plugins: [
            {
              display: true,
              name: "data-labels"
            }
          ]
        };
      }
    },
    // 数据集集合
    datasets: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 数据集字段集合
    fields: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      // 集合列表
      aggregateList: [
        {
          value: "select",
          label: "列表"
        },
        {
          value: "sum",
          label: "汇总"
        },
        {
          value: "count",
          label: "统计个数"
        },
        {
          value: "max",
          label: "最大值"
        },
        {
          value: "min",
          label: "最小值"
        },
        {
          value: "avg",
          label: "平均值"
        }
      ],
      // 动画效果
      easingList: easingList.split(",")
    };
  },
  computed: {
    // 标题设置
    titleOptions: {
      get: function () {
        let opts = this.chart.options.find(item => item.type === "title");
        if (!opts) {
          opts = {
            display: true,
            position: "top",
            fontSize: 14,
            fontColor: "#666",
            fontStyle: "bold",
            padding: 10,
            text: "",
            type: "title"
          };
        }
        return opts;
      },
      set: function (newValue) {
        const opts = this.chart.options.find(item => item.type === "title");
        if (opts) {
          opts.display = newValue.display;
          opts.position = newValue.position;
          opts.fontSize = newValue.fontSize;
          opts.fontColor = newValue.fontColor;
          opts.fontStyle = newValue.fontStyle;
          opts.padding = newValue.padding;
          opts.text = newValue.text;
          opts.type = newValue.type;
        } else {
          this.chart.options.push(opts);
        }
      }
    },
    // 图例设置
    legendOptions: {
      get: function () {
        let opts = this.chart.options.find(item => item.type === "legend");
        if (!opts) {
          opts = {
            display: true,
            position: "bottom",
            labels: null,
            type: "legend"
          };
        }
        return opts;
      },
      set: function (newValue) {
        const opts = this.chart.options.find(item => item.type === "legend");
        if (opts) {
          opts.display = newValue.display;
          opts.position = newValue.position;
          opts.labels = newValue.labels;
          opts.type = newValue.type;
        } else {
          this.chart.options.push(opts);
        }
      }
    },
    // 动画设置
    animationOptions: {
      get: function () {
        let opts = this.chart.options.find(item => item.type === "animation");
        if (!opts) {
          opts = {
            duration: 1000,
            easing: "easeInExpo",
            type: "animation"
          };
        }
        return opts;
      },
      set: function (newValue) {
        const opts = this.chart.options.find(item => item.type === "animation");
        if (opts) {
          opts.duration = newValue.duration;
          opts.easing = newValue.easing;
          opts.type = newValue.type;
        } else {
          this.chart.options.push(opts);
        }
      }
    },
    // 显示标签
    labelOptions: {
      get: function () {
        let opts = this.chart.plugins[0];
        if (!opts) {
          opts = {
            display: true,
            name: "data-labels"
          };
        }
        return opts;
      },
      set: function (newValue) {
        const opts = this.chart.plugins[0];
        if (opts) {
          opts.display = newValue.display;
          opts.name = newValue.name;
        } else {
          this.chart.plugins.push(opts);
        }
      }
    }
  },
  methods: {
    dataChange () {}
  }
};
</script>

<style lang="scss" scoped>
.config-container {
  padding-bottom: 20px;
  .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
  }
}
</style>

